<template>
    <div>
        <el-form :inline="true" :model="notice" class="demo-form-inline" style="margin-top: 10px;">
            <el-form-item label="通知标题" style="margin-left: 10px;">
                <el-input v-model="notice.titile" placeholder="通知标题"></el-input>
            </el-form-item>
            <el-form-item label="通知类型">
                <el-select v-model="notice.type" placeholder="通知类型">
                    <el-option label="通知公告" value="0"></el-option>
                    <el-option label="教育学习" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布通告</el-button>
            </el-form-item>
            <div style="border: 1px solid #ccc;">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                    :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
                    @onCreated="onCreated" />
            </div>
        </el-form>
    </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import noticeApi from '../../api/notice'
import getStorage from '@/utils/getStorage'
export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            notice: {
                titile: '',
                context: '',
                type: '',
                id: '',
            },
            editor: null,
            html: '',
            toolbarConfig: {},
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                },

            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {

        //发布通告
        onSubmit() {
            //判断通知标题和通知类型是否为空，为空则返回false。
            if (this.notice.titile === '' || this.notice.type == '') {
                this.$message({
                    message: '通知标题或通知类型不能为空',
                    type: 'warning'
                });
                return false;
            }
            //转化富文本文件为notice的context (主体)
            this.notice.context = this.html;
            //获取用户id
            var userid = getStorage.getAxiosUserId();
            //赋值给notice中的id
            this.notice.id = userid;
            noticeApi.insert(this.notice).then(res => {
                // this.$message({
                //     message: res.data,
                //     type: 'success'
                // });
            })

        },
        onchange() {
            console.log(this.html);
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    created() {
        const uploadConfig = {
            //设置允许上传的文件类型
            // allowedFileTypes: [],
            // 自定义增加 http  header
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            // 自定义图片上传
            async customUpload(file, insertFn) {
                // file 即选中的文件
                const fd = new FormData()
                fd.append('file', file)
                axios
                    .post('http://localhost:8888/Editor/pictureUpload', fd)
                    .then((response) => {
                        const url = response.data.message;
                        // const url = process.env.VUE_APP_BASE_IMG + response
                        // 插入图片
                        console.log(url);
                        insertFn(url)
                    })
                    .catch(() => { })
            },
        }
        // 图片配置设置
        this.editorConfig.MENU_CONF['uploadImage'] = uploadConfig
        // 视频配置设置
        this.editorConfig.MENU_CONF['uploadVideo'] = uploadConfig
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //     this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        // }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
  
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped ></style>